import { io } from 'socket.io-client'
import {ElMessageBox} from 'element-plus'
import {h} from 'vue'
const socket = io('', {
  path: '/api-server/socket.io',
})
export const socketId = ref()
export const userStatusList = ref<any[]>([]) //当前登入用户链表
export const messages = ref<any[]>([])
socket.on('connect', () => {
  socketId.value = socket.id
})
socket.on('message', (message) => {
  messages.value.push(message)
})
export const sendMessage = (message: string) => {
  socket.emit('message', message)
}

socket.on('userListChange', (res) => {
  userStatusList.value = res.onlineUserIds
})
export const upLine = (userId: string) => {
  socket.emit('upLine', userId)
}
socket.on('callme', (data) => {
  ElMessageBox({
    title: `来自${data.username}问候`,
    // Should pass a function if VNode contains dynamic props
    message: () =>
      h('div', null, [
        h('img', { 
          src: data.headImg, 
          style: {
            width: '50px',
            height: '50px',
            borderRadius: '50%'
          } 
        }),
        h('div', {
          style: {
            marginTop: '10px',
            fontSize: '20px',
            fontWeight: 'bold'
          }
        }, [data.message])
      ]),
  })
})